<template>
	<div style='background: #fff;'>
		<div class='content-title'>数据表</div>
		<div style='padding:35px 20px'>
			<Table :columns="tableList" :data="tableData" stripe></Table>
		</div>
	</div>
</template>
<script type="text/javascript">
	export default{
		data(){
			return{
				tableList: [
                    {
                        title: '表',
                        key: 'Name',
                        render:(h,params)=>{
                            return h('a',{
                                on:{
                                    click:()=>{
                                        this.rowClick(params.row)
                                    }
                                }
                            },params.row.Name)
                        }
                    },
                    {
                        title: '引擎',
                        key: 'Engine',
                    },
                    {
                        title: '校对',
                        key: 'Collation',
                    },
                    {
                        title: '数据长度',
                        key: 'Data_length',
                    },
                    {
                        title: '索引长度',
                        key: 'Index_length',
                    },
                     {
                        title: '数据空闲',
                        key: 'Data_free',
                    },
                     {
                        title: '自动增量',
                        key: 'Auto_increment',
                    },
                    {
                        title: '行数',
                        key: 'Rows',
                    },
                    {
                        title: '操作',
                        key: 'action',
                        width:100,
                        render: (h, params) => {
                            return h('div', [
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer',
                                        marginRight:'10px'
                                    },
                                    on: {
                                        click: () => {
                                            this.del(params.row)
                                        }
                                    }
                                }, '删除'),
                                h('span', {
                                    style: {
                                        color:'#06A0FD',
                                        cursor:'pointer'
                                    },
                                    on: {
                                        click: () => {
                                            this.empty(params.row)
                                        }
                                    }
                                }, '清空')
                            ]);
                        }
                    }
                ],
                tableData: [],
                
			}
		},
        created(){
            this.$bus.on('getTable',this.getData)
            this.getData();
        },
		methods:{
            getData(){
                //获取数据表
				this.fetch('/home/app/data/table').then(res=>{
	                if(res&&res.data.data&&res.data.code){
	                	this.tableData = res.data.data;
	                }
	            })
            },
            del(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: `<p>删除数据表会对其他相关设置产生影响，确定删除吗?</p>`,
                    onOk: () => {
                        this.fetch('/home/app/data/del/table/'+row.Name).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('删除成功')
                                this.getData();
                                this.$bus.emit('updateTable',true)
                            }
                        })
                    }
                });
                
            },
            //清空
            empty(row){
                this.$Modal.confirm({
                    title: '提示',
                    content: `<p>确定清空${row.Name}数据表吗?</p>`,
                    onOk: () => {
                        this.fetch('/home/app/data/truncate/table/'+row.Name).then(res=>{
                            if(res&&res.data.data&&res.data.code){
                                this.$Message.success('数据表已清空')
                                this.getData();
                            }
                        })
                    }
                });
            },
            rowClick(row){
                this.$router.push({path:'/home/data/data',query:{name:row.Name}})
                this.$bus.emit('updateMainMenuActive','/home/data/data?name='+row.Name)
                
            }
		}
	}
</script>
